<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <div>
          <el-input v-model="listQuery.keyword" placeholder="搜索关键字" clearable></el-input>
        </div>
        <div>
            <el-date-picker
              prefix-icon="none"
              v-model="listQuery.searchTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
        </div>
        <div style="width: 110px;">
          <el-select v-model="listQuery.is_guajie" placeholder="请选择" @change="selet()">
              <el-option
                      v-for="item in listQuery.guajie"
                      :key="item.is_guajie"
                      :label="item.name"
                      :value="item.is_guajie">
              </el-option>
          </el-select>
        </div>
        <div style="margin-right: 10px;width: 110px;">
          <el-select v-model="listQuery.is_partner" placeholder="请选择" @change="selet()">
              <el-option
                      v-for="item in listQuery.partner"
                      :key="item.is_partner"
                      :label="item.name"
                      :value="item.is_partner">
              </el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh-right"  @click="Refresh()">
          刷新
        </el-button>
        <el-button type="primary"  @click="modify()">
          修改配合人员
        </el-button>
      </div>
    </div>
    <!-- 列表-->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%;" @selection-change="table_kuang">
      <el-table-column
       type="selection"
       width="55" align="center">
      </el-table-column>
      <el-table-column label="id" prop="id" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="left">
        <template slot-scope="scope">
          <span class="link-type" @click="list_detail(scope)">{{scope.row.contract_num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同标题" align="center">
        <template slot-scope="scope">
          <span class="link-type" @click="list_detail(scope)">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同类型" align="center">
        <template slot-scope="{row}">
          <span>{{row.type_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="委托单位" align="center">
        <template slot-scope="{row}">
          <span>{{ row.entrust_unit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="市场负责人" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.market_person_uid_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="市场配合人" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.market_person_b_uid_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合伙人" align="center" width="120">
        <template slot-scope="{row}">
          <!-- <span>{{ row.market_person_b_uid_str}}</span> -->
          <div v-for="item in row.market_person_partner">
            {{item.real_name}}:{{item.ratio}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.check_status_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          <span>{{ row.remark}}</span>
        </template>
      </el-table-column>
     <el-table-column label="操作" align="center" width="120">
       <template slot-scope="scope">
         <div v-if="scope.row.check_status2==0">
             <el-tooltip class="item" effect="dark" content="通过" placement="top">
               <el-popconfirm title="请查看合同信息无误后点击确认？" @onConfirm="edit(scope)">
                 <el-button slot="reference" size="mini" icon="el-icon-check" type="success">
                   <!-- 修改 -->
                 </el-button>
               </el-popconfirm>
             </el-tooltip>

             <el-tooltip class="item" effect="dark" content="驳回" placement="top">
               <el-popconfirm title="如果合同信息有误，请点击驳回。" @onConfirm="list_del(scope)">
                 <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-close" type="danger">
                 </el-button>
               </el-popconfirm>
             </el-tooltip>
         </div>
         <div v-if="scope.row.check_status2==0">

         </div>
       </template>
     </el-table-column>

    </el-table>
    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="popup_details_show" width="50%" center>
      <div>
        <div class="main">
          <div>
            <div class="nav-left">
              <el-form :model="ruleForm"  label-width="100px"
                class="demo-ruleForm">
                <div style="display: flex;justify-content: space-between;">
                  <div style="width: 50%;">
                    <el-form-item label="合同标题" prop="title">
                      {{ruleForm.title}}
                    </el-form-item>
                    <el-form-item label="委托单位" prop="entrust_unit">
                      {{ruleForm.entrust_unit}}
                    </el-form-item>
                    <el-form-item label="生效日期" prop="shengxiao_date">
                      {{ruleForm.shengxiao_date_str}}
                    </el-form-item>
                    <el-form-item label="截止日期" prop="jiezhi_date">
                      {{ruleForm.jiezhi_date_str}}
                    </el-form-item>
                    <el-form-item label="负责人人员" prop="market_person_uid_str">
                      {{ruleForm.market_person_uid_str}}
                    </el-form-item>
                  </div>
                  <div style="width: 50%;">
                    <el-form-item label="合同编号" prop="contract_num">
                      {{ruleForm.contract_num}}
                    </el-form-item>
                    <el-form-item label="建设单位" prop="build_position">
                      {{ruleForm.build_position}}
                    </el-form-item>
                    <el-form-item label="签约日期" prop="qianyue_date">
                      {{ruleForm.qianyue_date_str}}
                    </el-form-item>
                    <el-form-item label="配合人员" prop="market_person_b_uid_str">
                      {{ruleForm.market_person_b_uid_str}}
                    </el-form-item>
                    <el-form-item label="提醒日期" prop="tixing_date">
                      {{ruleForm.tixing_date}}
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
          </div>
          <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="备注" prop="pass">
                {{ruleForm.remark}}
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="popup_details_show = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 修改配合人员 -->
    <el-dialog
      title="修改配合人员"
      :visible.sync="popup_modify_show"
      width="30%"
      center>
      <div style="padding: 0px 0px 240px 0px; display: flex;align-items: center;">
        <div>
          请选择配合人员：
        </div>
          <div style="width: 150px;">
            <!-- <el-select v-model="coord_list.fuze_uid" filterable placeholder="请选择负责人员"
            @change="coor_selet()" clearable>
              <el-option
                v-for="item in person_whole"
                :key="item.uid"
                :label="item.real_name"
                :value="item.uid">
              </el-option>
            </el-select> -->

            <el-select
              style="width: 150px"
              @change="coor_selet()"
              v-model="coord_list.fuze_uid"
              placeholder="搜索负责人"
              clearable
              filterable
            >
              <el-option
                v-for="item in person_whole"
                :key="item.uid"
                :label="item.real_name"
                :value="item.uid"
              >
              </el-option>
            </el-select>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_modify_show = false">取 消</el-button>
        <el-button type="primary" @click="coor_ok()" :loading="listLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页-->
    <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
   contract_list_fuze,
   contract_detail,
   user_select_list,
   change_peihe_person,
   contract_check2
  } from '@/api/jiesuan/contract/fuze'
  export default {
    name: 'contract_fuze_list',
    data() {
      return {
        loading:false,
        person_whole:[],
        list_elections: [],
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }]
        },
        listLoading: 0,
        submitLoading: false,
        popup_details_show:false,
        popup_modify_show:false,
        diary_details: {},
        dialogVisible: false,
        // jia_content: "",
        // jia_title: "",
        list: null,
        //修改配合人员
        coord_list:{
          contract_ids:[],
          fuze_uid:"",
        },

        listQuery: {
          guajie:[
            {'name':"全部挂接","is_guajie":"-1"},
            {'name':"已挂接","is_guajie":"1"},
            {'name':"未挂接","is_guajie":"0"}
          ],
          // select:'全部',
          is_guajie:"-1",
          is_partner:"0",
          partner:[
            {'name':"负责合同","is_partner":"0"},
            {'name':"合伙合同","is_partner":"1"}
          ],
          page: 1,
          limit: 10,
          keyword: "",
          searchTime: []
        },
        // tableKey: 1,
        // currentPage: 1,
        page_count: 0,
        // page_limit: 10,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      this.getList()
      this.peopledrop()
    },
    mounted() {

    },
    methods: {
      remoteMethod(e){
        this.coord_list.fuze_uid=e
        console.log(this.listQuery.peihe_uid,"wwww")
        this.loading = true;
        user_select_list(e).then(res=>{
          console.log(res)
          this.person_whole=res.data
          this.loading = false;
        })
      },

      coor_ok(){
        this.listLoading=true
        change_peihe_person(this.coord_list)
        .then(res=>{
          console.log(res.code)
          if(res.code==200){
            this.listLoading=false
            this.popup_modify_show = false
            this.coord_list.fuze_uid=""
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
          }
        }).catch(() => {
          this.listLoading=false
        })
      },
      //默认用户下拉
      peopledrop() {
        user_select_list(this.person_keyword).then(res => {
          console.log(res)
          this.person_whole = res.data
        })
      },
      //复选框状态改变
      table_kuang(val){
          this.coord_list.contract_ids = val
            .map((item) => {
              return item.id;
            })
            .join(",");
            console.log(this.coord_list.contract_ids)
      },
      coor_selet(){
        console.log(this.coord_list.fuze_uid)
      },
      //默认挂接下拉
      selet(e){
        // console.log(this.listQuery.select)
        // this.listQuery.is_guajie=this.listQuery.select
        this.getList()
      },

      // 获取列表数据
      getList(page, limit, listQuery) {

        page = page || this.listQuery.page;
        limit = limit || this.listQuery.limit;
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery;
        let keyWord = listQuery.keyword || "";

        let searchTime =
          listQuery.searchTime && listQuery.searchTime.length > 0
            ? listQuery.searchTime[0] + "," + listQuery.searchTime[1]
            : "";
        this.listQuery.is_jiesuan = this.type_num
        this.listLoading = true;
        this.listQuery.search_time = searchTime
        contract_list_fuze(this.listQuery).then((res) => {
          this.list = res.data;
          this.page_count = res.count;
          this.listLoading = false;
        });
        },
      //搜索事件
      searchList() {
        this.listQuery.page=1
        this.getList()
      },
     //每页几条数据
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.listQuery.limit = val
       this.getList();
     },
     //跳转到
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.listQuery.page = val
       this.getList();
     },
      //详情
      list_detail(val) {
        let that = this
        that.$router.push({
          path:"detail",
          query:{
            contract_id:val.row.id
          }
        })

        // that.popup_details_show = true
        // contract_detail(val.row.id).then(res => {
        //   console.log(res)
        //   if (res.code == 200) {
        //     that.ruleForm= res.data
        //   }
        // })
      },
      Refresh(){
        this.listQuery.keyword=""
        this.listQuery.searchTime=""
        this.listQuery.limit=10
        this.listQuery.page=1
        this.getList()
      },
      modify(){
        if(this.coord_list.contract_ids!=""){
          this.popup_modify_show=true
        }else{
          this.$message({
            message: "请勾选合同",
            type: "warning",
          });
        }
      },
      //通过
      edit(val){
        contract_check2(val.row.id,1).then(res=>{
          console.log(res)
          //成功
          this.$message({
              message: res.msg,
              type: 'success'
          });
          this.getList()
        })
      },
      //拒绝
      list_del(val){
        contract_check2(val.row.id,2).then(res=>{
          console.log(res)
          //成功
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.getList()
        })
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  .button_wight {
    width: 60%;
    height: 60px;
  }

  .button {
    text-align: center;
  }

  .desc {
    display: flex;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .main {
    padding: 20px;
  }

  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 230px !important;
    padding: 3px 3px !important;
  }
</style>
<style type="text/css">
  .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    /*height:600px;*/
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
  }
</style>
